<template>
  <Row class="mo-contribute-row">
    <Col :lg="{span:16,offset:4}" class="contribute-col">
      <div class="contribute-box" v-if="list.length != 0">
        <h2>我的创作历程</h2>
        <Timeline class="contribute-main">
          <TimelineItem v-for="(item, index) in list" :key="index">
            <p class="time">
              <span>{{$moment(item.createdAt).format("LLL")}}</span>
              <span v-if="item.islock==0" style="background-color:green">已审核</span>
              <span v-if="item.islock==1" style="background-color:red">未审核</span>
            </p>
            <p class="content">
              <b>标题：</b>
              {{item.ititle}}
            </p>
            <p class="content">简介：{{item.ijianjie}}</p>
          </TimelineItem>
        </Timeline>
        <div v-if="list.length == 0">小主还没有任何文章提交哦！</div>
      </div>
    </Col>
  </Row>
</template>
<script>
import { Timeline, TimelineItem } from "view-design";
export default {
  name: "moContribute",
  data() {
    return {
      list: []
    };
  },
  created() {
    this.$axios
      .get(
        this.$store.getters.url +
          "/myartlist?userId=" +
          localStorage.getItem("loginfo2")
      )
      .then(res => {
        this.list = res.data.data;
      });
  },
  components: {
    Timeline,
    TimelineItem
  }
};
</script>
<style lang="scss" scoped>
.mo-contribute-row {
  width: 100%;
  height: auto;
  min-height: 560px;
  .contribute-col {
    height: auto;
    background-color: white;
    display: flex;
    justify-content: center;
    .contribute-box{
      width: 80%;
      min-width:500px;
    }
    h2 {
      padding-top: 15px;
    }
    .contribute-main {
      padding-top: 20px;
    }
    .time {
      display: flex;
      // justify-content: space-between;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        &:nth-of-type(2) {
          font-weight: 200;
          font-size: 12px;
          padding-left: 5px;
          padding-right: 5px;
          border-radius: 5px;
          color: white;
        }
      }
    }
    .content {
      padding-left: 5px;
      text-align: left;
    }
  }
}
</style>